<style scoped>
  @import './css/img.css';
</style>
<template>
  <!--  <Card></Card> -->
  <div class="ddx9">
    <Row :gutter="16">
      <Col span="20" class="ddx7">
        <Row class="ddz1">
          <Col span="6">
            <div class="ddz2">
              <div class="ddx8">空间:</div>
              <div class="ddz3">
                <Cascader :data="data0" change-on-select @on-change="change" v-model="fson" :clearable="false"></Cascader>
              </div>
            </div>
          </Col>
          <Col span="6" style="padding-left: 20px;">
            <div style="float: left;padding: 0px 3px;">
              <Upload type="select" :before-upload="checkUpload" action="" :format="['jpg','jpeg','png']">
                <Button type="info" v-bind:disabled="uploading" v-text="hasPic?'更换图片':'选择图片'"></Button>
              </Upload>
            </div>
            <div style="float: left;padding: 0px 3px;">
              <Button type="info" icon="ios-cloud-upload-outline" @click="doUpload"
                      v-bind:disabled="uploading || file == null">上传图片
              </Button>
            </div>
          </Col>
          <Col span="6">
            <div class="ddb">
              <div class="ddz4">模块:</div>
              <div class="ddb1">
                <Select v-model="value14" placeholder="请选择">
                  <Option value="beijing">类型一</Option>
                  <Option value="shanghai">类型2</Option>
                  <Option value="shenzhen">类型3</Option>
                </Select>
              </div>
            </div>
          </Col>
          <Col span="6" style="padding-left: 20px;"> 字体颜色
            <ColorPicker v-model="color1"/>
            填充颜色
            <ColorPicker v-model="color2"/>
          </Col>
        </Row>
        <!-- 上传 -->
        <div class="ddz9" v-show="!hasPic">
          <Spin fix v-if="uploading" size="large">
            <Icon type="load-c" size=30 class="demo-spin-icon-load"></Icon>
            <div style="font-size: 18px">上传中....</div>
          </Spin>
          <Alert v-show="!hasPic && file == null" show-icon class="ddb2">该空间未配置图片，请上传！</Alert>
          <img  alt="" v-show="!hasPic && file != null" v-bind:src="preview" class="showImg">
        </div >
        <div class="ddz9" v-show="hasPic">
          <Spin fix v-if="loadingPic" size="large">
          </Spin>
          <img  alt="" v-bind:src="curPic" class="showImg">
        </div>
      </Col>
      <Col span="4" class="ddx1">
        <div class="ddx2">标签库</div>
        <div class="ddx3">
          <p><span class="ddx4">空间标签</span></p>
          <Row>
          <Col span="8" v-for="(item,index) in notSpace" :key="'c'+index">
            <pushpin imgUrl="" :title="item.label" :oid="item.value+''" v-show="true"></pushpin>
          </Col>
          </Row>
        </div>
        <div class="ddx10">
           <p><span class="ddx4">设备便签</span></p>
            <Col span="8" v-for="(item,index) in devList" :key="'c'+index">
              <dragger imgUrl="" :title="item.name" :oid="item.id" v-show="item.show"></dragger>
            </Col>
        </div>
      </Col>
    </Row>
  </div>
</template>
<script src="./js/img.js"></script>
